<div class="page-wrapper d-flex flex-column pt-4">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Medias
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">

        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card card-body">
                    <filter-list request="request" callback="getList(pageIndex)" create-url="'/portal/media/create'"
                        create-text="'Upload Media'"></filter-list>
                </div>
            </nav>
        </aside>

        <!-- ----------------------------------------------------------- -->

        <div class="content-body py-3 pe-3">
            <section class="card manual">
                <div class="card-body">
                    <table class="table table-hover" cellspacing="0">
                        <thead class="thead-light">
                            <tr>
                                <!-- <th scope="col" style="width: 3%">
                                    <span class="oi oi-sort-ascending"></span>
                                </th> -->
                                <!--<th scope="col" style="width: 4%;">
                            <span class="fa fa-grip-vertical fa-xs text-black-50-numeric-down"></span>
                        </th>
                        <th scope="col" style="width: 5%;">
                            Priority
                        </th>-->
                                <th scope="col" class="col-5">Title</th>
                                <th scope="col" class="col">Path</th>
                                <th scope="col" class="col">Image</th>
                                <th scope="col" class="col">Created Date</th>
                                <th scope="col" class="col"></th>
                                <th scope="col" class="col"></th>
                            </tr>
                        </thead>

                        <tbody class="sortable" ng-init="getList()">
                            <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="media"
                                sort-model-id="{{item.id}}">
                                <!-- <td style="cursor: grab" class="drag-header">
                                    <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-drag-drop-2" width="20" height="20"
                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <rect x="8" y="8" width="12" height="12" rx="2" />
                                        <line x1="4" y1="4" x2="4" y2="4.01" />
                                        <line x1="8" y1="4" x2="8" y2="4.01" />
                                        <line x1="12" y1="4" x2="12" y2="4.01" />
                                        <line x1="16" y1="4" x2="16" y2="4.01" />
                                        <line x1="4" y1="8" x2="4" y2="8.01" />
                                        <line x1="4" y1="12" x2="4" y2="12.01" />
                                        <line x1="4" y1="16" x2="4" y2="16.01" />
                                    </svg>
                                </td>
                                <td>
                            {{item.priority}}
                        </td> -->
                                <td>{{item.title}}</td>
                                <td>
                                    <div class="input-group input-group-sm">
                                        <input id="path-modal-{{$index}}" value="{{item.fullPath}}"
                                            onclick="this.select()" class="form-control form-control-sm"
                                            readonly="readonly" />
                                        <button class="btn btn-outline-secondary btn-clipboard" type="button"
                                            data-clipboard-target="#path-modal-{{$index}}">
                                            <i class="mi mi-Copy"></i>
                                        </button>
                                    </div>
                                </td>
                                <td>
                                    <preview-image img-height="25" img-src="item.fullPath"></preview-image>
                                </td>
                                <td>
                                    <small>
                                        {{item.createdDateTime | utcToLocal:'d.M.yyyy h:mm a'}}
                                    </small>
                                </td>
                                <td class="text-black-50">
                                    <small ng-if="item.status == 'Published' || item.status == 2">🟢</small>
                                    <small ng-if="item.status == 'Schedule' || item.status == 4">🟡</small>
                                    <small ng-if="item.status == 'Draft' || item.status == 3">🔴</small>
                                    <small ng-if="item.status == 'Deleted' || item.status == 0">⚫️</small>
                                </td>
                                <td>
                                    <div class="dropdown float-lg-end ms-auto pe-1">
                                        <a href="javascript:;" class="cursor-pointer" id="dropdownTable2"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fa fa-ellipsis-h text-secondary" aria-hidden="true"></i>
                                        </a>
                                        <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5"
                                            aria-labelledby="dropdownTable2" style="">
                                            <li><a href="/portal/media/details/{{item.id}}" class="dropdown-item border-radius-md">
                                                    <span class="fa fa-pen"></span> Edit
                                                </a>

                                            </li>
                                            <li><a href="{{item.fullPath}}" target="_blank" class="dropdown-item border-radius-md">
                                                    <span class="fas fa-eye"></span> Preview
                                                </a>

                                            </li>
                                            <li>
                                                <button type="button" class="dropdown-item border-radius-md del-popover"
                                                    ng-click="remove(item.id)">
                                                    <span class="fas fa-trash-alt text-danger"></span> Delete
                                                </button>
                                                <div class="popover-body d-none">
                                                    <a href="/{{currentLanguage}}/portal/medias/delete/{{item.id}}"
                                                        class="btn btn btn-danger">Yes, I want to
                                                        delete!</a>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                    <div class="btn-group btn-group-sm btn-group-sm float-end" role="group"
                                        aria-label="Actions">

                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-body">
                    <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                        ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="getList(page-1)"
                        scroll-top="true"></paging>
                </div>
            </section>

        </div>
    </div>
</div>